<template>
	<view>
		<!-- #ifdef MP-WEIXIN -->
		<Navbar :hideBtn="true"></Navbar>
		 <!-- #endif -->
		<view class="pl-30 pr-30">
			<view class="mb-24 flex jc-between ai-center">
				<text class="font-36 font-color font-bold">{{ isAudit ? '最近浏览' : '最近观看' }}</text>
				<view class="flex ai-center" @click="routerHandle('/pages/watching/more-list')">
					<text class="font-24 font-color-2 mr-6">更多</text>
					<u-icon name="arrow-right" :color="fontColor2" size="24rpx"></u-icon>
				</view>
			</view>
			<template v-if="historyList.length > 0">
				<view class="video-nav">
					<view class="video-item" v-for="item in historyList" :key="item.video_id" @click="toVideoDetail(item)">
						<u-image :src="item.cover.url" width="100%" height="296rpx" radius="16rpx"></u-image>
						<text class="font-28 font-color font-bold mt-16 text-ellipsis">{{ item.video_title }}</text>
						<text class="font-24 font-color-3 mt-4">共{{ item.total_plot_num }}集</text>
					</view>
				</view>
			</template>
			<template v-else>
				<view class="empty-nav">
					<u-icon name="file-text" color="#dddddd" size="200rpx"></u-icon>
				</view>
			</template>
		</view>

		<!-- <view>
			<template v-if="videoList.length > 0 && !isAudit">
				<LikeVideo :videoList="videoList"></LikeVideo>
			</template>
			<template v-else>
				<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" text=" ">
				</u-empty>
			</template>
		</view> -->

		<u-gap height="300rpx"></u-gap>

	</view>

</template>

<script>
import colorMixins from '@/mixins/colorMixins.js'
import Navbar from '@/components/navbar/navbar.vue'
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js'
import MescrollUni from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-uni.vue'
import LikeVideo from '@/components/like-video/like-video.vue'
import { queryHistoryList } from '@/api/index.js'

export default {
  components: {
    MescrollUni,
    Navbar,
    LikeVideo,
  },
  mixins: [MescrollMixin, colorMixins],
  data() {
    return {
      historyList: [],
      videoList: [{
        invite_code: 0,
        is_follow: false,
        middleman_id: 0,
        nickname: '匿名用户',
        series: 74,
        series_id: '640198b2819ce84ffc6d348b',
        tfid: 0,
        tv_id: '640198aae1a35c8785146e42',
        tv_image: 'https://xinyous-playlet.oss-cn-shenzhen.aliyuncs.com/fengmian/5a4df958-c3fb-493a-a07e-70f248dbbc3c.jpg',
        tv_name: '顶级弃少',
        user_id: '63f7156f0c801c3e62387cd4',
        _add_time: 1682409999038,
        _add_time_str: '2023-03-03 15:05:27',
        _id: '64019c37819ce84ffc6e48dc',
      }],
    }
  },
  computed: {
    isAudit() {
      return this.$store.state.appConfig.is_ad == 1
    }
  },
  onShow() {
    this.init()
  },

  methods: {
    async init() {
      const { data } = await queryHistoryList({ pageNum: 1 })
      const arr = data.filter((item, index) => index < 6)
      this.historyList = arr
    },
    toVideoDetail(item) {
      const { video_id } = item
      uni.navigateTo({ url: `/pages/player/player?library_id=${video_id}` })
    }
  }
}
</script>

<style lang="scss" scoped>
	.video-nav {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.video-item {
			width: 32%;
			display: flex;
			flex-direction: column;
			margin-bottom: 40rpx;
		}
	}

	.video-nav::after {
		content: '';
		width: 32%;
	}

	.tv_name {
		font-size: 24rpx;
		font-weight: 600;
		padding: 0 2rpx 6rpx 8rpx;
		display: -webkit-box;
		overflow: hidden;
		white-space: normal !important;
		text-overflow: ellipsis;
		word-wrap: break-word;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.empty-nav {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 60rpx;
	}
</style>
